<template>
  <div class="content" @click='showMoreHeros'>
    <div class="main">
      <div class="mainbg"></div>
      <div class="hear-logo">
        <p>周免英雄</p>
        <ul class="logo-list">
          <li :class='isflag === gethearLogo.id?"content":""' v-for='gethearLogo in gethearLogos' :key='gethearLogo.id' @mouseenter="changeLogo(gethearLogo.id)">
            <img class='img2' v-show='isflag !== gethearLogo.id' :src="gethearLogo.smallImg" width="69px" height="69px">
            <img class='img1' :src="gethearLogo.bigImg" width="224px" height="69px">
          </li>
        </ul>
      </div>
      <!-- 面包屑 -->
      <div class="toindex">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>王者荣耀首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 主体 -->
      <div class="main-show">
        <div class='left fl'>
          <LunboBottom :lunbolist='lunbolist'></LunboBottom>
        </div>
        <div class="right fl">
          <el-tabs :tab-position="tabPosition" style="height: 200px;">
            <el-tab-pane label="用户管理">
              <div class="search-button">
                <div class="search fl">
                  <i class="el-icon-search search-icon"></i>
                  <input class="input" type="text" placeholder="请输入关键字搜索更多视频">
                </div>
                <button class='fl search-btn'>搜索</button>
              </div>
              <ul class='search-txt'>
                <li>
                  <div class="s">1</div>
                  <a target="_blank" href="#" class="t">《教练视角》第27期：双辅助体系揭秘，顺风能开逆风能保</a>
                  <cite>990.7万</cite>
                </li>

                <li>
                  <div class="s">2</div>
                  <a target="_blank" href="#" class="t">【王者克制论】无伤越塔太凶悍？李九教你完美克制芈月</a>
                  <cite>790.5万</cite>
                </li>
                <li>
                  <div class="s">3</div>
                  <a target="_blank" href="#" class="t">面对六球东皇，梦泪的刁钻出击，却被梦嫂无情的嘲笑！</a>
                  <cite>740.1万</cite>
                </li>
                <li>
                  <div class="s">4</div>
                  <a target="_blank" href="#" class="t">【快速上手英雄技能】鲁班大师</a>
                  <cite>670.5万</cite>
                </li>
                <li>
                  <div class="s">5</div>
                  <a target="_blank" href="#" class="t"> 小棉花Top5：逆天雅典娜浴血屠戮1V5！一秒五枪看完我跪了</a>
                  <cite>620.3万</cite>
                </li>
                <li>
                  <div class="s">6</div>
                  <a target="_blank" href="#" class="t"> 王者荣耀：最容易拿王者模拟战第一名的羁绊，5吴国4魏国真强！</a>
                  <cite>543.0万</cite>
                </li>
                <li>
                  <div class="s">7</div>
                  <a target="_blank" href="#" class="t">【快速上手英雄技能】西施</a>
                  <cite>112.0万</cite>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="配置管理">
              <div class="search-button">
                <div class="search fl">
                  <i class="el-icon-search search-icon"></i>
                  <input class="input" type="text" placeholder="请输入关键字搜索更多图文信息">
                </div>
                <button class='fl search-btn'>搜索</button>
              </div>
              <ul class='search-txt'>
                <li>
                  <div class="s">1</div>
                  <a target="_blank" href="#" class="t">体验服12.13日体验服6名英雄调整，鲁班嬴政要上天了</a>
                  <cite>8654</cite>
                </li>
                <li>
                  <div class="s">2</div>
                  <a target="_blank" href="#" class="t">王者模拟战更新公告</a>
                  <cite>7544</cite>
                </li>
                <li>
                  <div class="s">3</div>
                  <a target="_blank" href="#" class="t">全射手出装铭文，请您收藏（下）</a>
                  <cite>6121</cite>
                </li>
                <li>
                  <div class="s">4</div>
                  <a target="_blank" href="#" class="t">【一图识英雄】神匠鲁班大师，超强机动制霸峡谷</a>
                  <cite>5888</cite>
                </li>
                <li>
                  <div class="s">5</div>
                  <a target="_blank" href="#" class="t">12月英雄梯度分析之发育路篇：射手该玩谁？了解一下</a>
                  <cite>4785</cite>
                </li>
                <li>
                  <div class="s">6</div>
                  <a target="_blank" href="#" class="t">体验服全新嬴政伤害对比，全技能移动施法还可清空敌人攻击力！</a>
                  <cite>1990</cite>
                </li>
                <li>
                  <div class="s">7</div>
                  <a target="_blank" href="#" class="t">【王者触手可及】体验服又双叒削孙尚香！收下这份国服攻略，随便削完全不怕</a>
                  <cite>990</cite>
                </li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!-- 英雄攻略 -->
      <div class="hero-raiders">
        <h2>英雄攻略</h2>
        <ul class="hero-list fl">
          <li class='li2' :class="hero.id===isname?'cutent':''" v-for="hero in herolists" :key="hero.id" @mouseenter="changeid(hero.id)">
            <img :src="hero.src" alt="">
            <div v-if="hero.id <= 7"></div>
            <div class='hothero' v-else></div>
            <ul v-if='hero.id === isname' class="hero-txts">
              <li v-for='heroxqByidtxt in heroxqByidtxts' :key='heroxqByidtxt.id'>{{heroxqByidtxt.title}}</li>
            </ul>
          </li>
        </ul>
        <button class="moreheroBtn" @mouseenter='showMoreHero'>更多英雄</button>
        <!-- 英雄弹出层 -->
        <div class="hero-raider"  v-show='isShow'>
          <div class="hero-more fl">
            <ul>
              <li class='more-li' v-for='tankelist in tankelists' :key='tankelist.id'>
                <img :src="tankelist.img" >
                <div>{{tankelist.cname}}</div>
              </li>
            </ul>
          </div>
          <div class="hero-type fl">
            <ul>
              <li :class='MoreHeroList.id === num ? "cutent":""' v-for='MoreHeroList in MoreHeroLists' :key="MoreHeroList.id" @mouseenter="changeMoreId(MoreHeroList.id)">
                {{MoreHeroList.name}}
              </li>
            </ul>
          </div>
        </div>
        <div class="hero-left fl">
          <ul class="shipin">
            <li v-for='heroxqByidsrc in heroxqByidsrcs' :key='heroxqByidsrc.id' @mouseenter="showSAN(heroxqByidsrc.id)" @mouseleave="lastShow()">
              <img :src="heroxqByidsrc.src" alt="">
              <p>{{heroxqByidsrc.title}}</p>
              <div class="sanjiao" v-if='isSanjiao===heroxqByidsrc.id'>
                <div class="logo"></div>
              </div>
            </li>
          </ul>
        </div>
        <ul class="hero-right fl">
          <li>
            <span class="span-left">视频</span>
            <span class="span-right">王者荣耀: 杨戬前期怎么打? 利用三段大招可以消耗和回血!</span>
          </li>
          <li>
            <span class="span-left">视频</span>
            <span class="span-right">王者荣耀: 杨戬前期怎么打? 利用三段大招可以消耗和回血!</span>
          </li>
          <li>
            <span class="span-left">视频</span>
            <span class="span-right">王者荣耀: 杨戬前期怎么打? 利用三段大招可以消耗和回血!</span>
          </li>
          <li>
            <span class="span-left">视频</span>
            <span class="span-right">王者荣耀: 杨戬前期怎么打? 利用三段大招可以消耗和回血!</span>
          </li>
          <li>
            <span class="span-left">视频</span>
            <span class="span-right">王者荣耀: 杨戬前期怎么打? 利用三段大招可以消耗和回血!</span>
          </li>
          <li>
            <span class="span-left">视频</span>
            <span class="span-right">王者荣耀: 杨戬前期怎么打? 利用三段大招可以消耗和回血!</span>
          </li>
          <li>
            <span class="span-left">视频</span>
            <span class="span-right">王者荣耀: 杨戬前期怎么打? 利用三段大招可以消耗和回血!</span>
          </li>
          <li>
            <span class="span-left">视频</span>
            <span class="span-right">王者荣耀: 杨戬前期怎么打? 利用三段大招可以消耗和回血!</span>
          </li>
        </ul>
      </div>
      <!-- 精品栏目 -->
      <div class="jingpin">
        <h2><i class="el-icon-s-promotion"></i>精品栏目</h2>
        <ul class="jingpin-left fl">
          <li :class='jingpinlist.id === isjingpin ?"cutent":""'
          v-for='jingpinlist in jingpinlists'
          :key='jingpinlist.id' @mouseenter='changeJingpin(jingpinlist.id)'>
            {{jingpinlist.name}}
          </li>
        </ul>
        <ul class="jingpin-right fl">
          <li v-for='jingpinxq in jingpinxqs' :key='jingpinxq.id'>
            <img :src="jingpinxq.src" alt="">
            <p>{{jingpinxq.title}}</p>
          </li>
        </ul>
        <button class='more-btn'>展示更多 <span style="color:#f3c258">"我来carry"</span> 栏目视频 ↓</button>
      </div>
      <!-- 技能攻略 -->
      <div class="jineng">
        <h2><i class="el-icon-s-ticket"></i>技能攻略</h2>
        <div class="tab-jineng fl">
          <div class="left">
            召唤师技能
          </div>
          <img class='jineng-img1' :src='`https://game.gtimg.cn/images/yxzj/img201606/summoner/${summoner_id}-big.jpg`'>
          <h4 class="jineng-name">{{jineng_name}}</h4>
          <div class="jineng-xq">{{jineng_description}}</div>
          <ul class="jinenglists">
            <li :class='summoner.summoner_id === isJinengCt? "cutent":""' v-for='summoner in summoners' :key='summoner.summoner_id' @mouseenter="changeJiNengID(summoner.summoner_id)" @click="changejinengID(summoner.summoner_id)">
              <img :src="summoner.src" alt="">
              <div class="list-txt">{{summoner.summoner_name}}</div>
            </li>
          </ul>
        </div>
        <div class="tab-right fl">
          <div class="left">
            局内道具
          </div>
          <ul class="daoju-list">
            <li class='daoju-li' :class='daojulist.item_id===isstp?"cutent":""' v-for='daojulist in daojulists' :key='daojulist.id' @mouseenter="changeStp(daojulist.item_id)" @mouseleave="changeaaa()">
              <img :src="daojulist.img">
              <div>{{daojulist.item_name}}</div>
              <div class="tanchuDiv" v-show='isfff' v-if='isstp === daojulist.item_id'>
                <div class="top">
                  <img class='fl' :src="daoju_img">
                  <div class="right fl">
                    <p class='first'>{{daoju_title}}</p>
                    <p>售价: {{daoju_sj}}</p>
                    <p>总价: {{daoju_zj}}</p>
                  </div>
                </div>
                <p v-html='daoju_xq' class='down'></p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import LunboBottom from '../../components/Lunbo-Bottom'
import Footer from '../../components/Footer/index'
export default {
  data: () => ({
    activeName: 'first',
    lunbolist: '',
    herolists: '',
    tabPosition: 'top',
    tabPosition2: 'left',
    isname: 1,
    heroxq: '',
    heroxqByidsrcs: '',
    heroxqByidtxts: '',
    jingpinxqs: '',
    jingpinlists: '',
    isjingpin: 1,
    isflag: 1,
    gethearLogos: '',
    iscontent: false,
    tankelists: [],
    isShow: false,
    MoreHeroLists: '',
    num: 1,
    summoners: '',
    isJinengCt: 80104,
    jineng_name: '惩戒LV.1解锁',
    jineng_description: '30秒CD：对身边的野怪和小兵造成真实伤害并眩晕1秒',
    summoner_id: 80104,
    daojulists: '',
    isstp: 1111,
    isfff: false,
    daoju_title: '铁剑',
    daoju_sj: '150',
    daoju_zj: '250',
    daoju_xq: '+20攻击力',
    daoju_img: 'https://game.gtimg.cn/images/yxzj/img201606/itemimg/1111.jpg',
    isSanjiao: false
  }),
  created () {
    this.getlunbo()
    this.getherolists()
    this.getheroxq(1)
    this.getjingpinxq(1)
    this.getjingpin(1)
    this.gethearLogo()
    this.getMoreHeroList(1)
    this.getMoreHeroLists()
    this.getsummoners()
    this.getdaojulists()
    this.getdaojuxxx(1111)
  },
  methods: {
    async getlunbo () {
      const { data, status } = await this.$axios('/getlunbo')
      if (status !== 200) alert('数据请求不到')
      this.lunbolist = data
    },
    async getherolists () {
      const { data, status } = await this.$axios('/herolist')
      if (status !== 200) alert('数据请求不到')
      // console.log(data)
      this.herolists = data
    },
    async getheroxq (id) {
      const { data } = await this.$axios(`/getheroxq`)
      data.forEach(el => {
        if (el.id === id) {
          const { sta, txt } = el
          // console.log(sta, txt)
          this.heroxqByidsrcs = sta
          this.heroxqByidtxts = txt
        }
      })
    },
    async getjingpinxq (id) {
      const { data } = await this.$axios(`/getjingpinxq`)
      data.forEach(el => {
        if (el.id === id) {
          const { sta } = el
          // console.log(sta)
          this.jingpinxqs = sta
        }
      })
    },
    async getjingpin (id) {
      const { data } = await this.$axios(`/getjingpin`)
      data.forEach(el => {
        if (el.id === id) {
          const { sta } = el
          // console.log(sta)
          this.jingpinlists = sta
        }
      })
    },
    async gethearLogo () {
      const { data, status } = await this.$axios('/gethearLogo')
      if (status !== 200) alert('数据请求不到')
      // console.log(data)
      this.gethearLogos = data
    },
    async getMoreHeroList (id) {
      this.tankelists = []
      const { data, status } = await this.$axios('/getherolist')
      if (status !== 200) alert('数据请求不到')
      data.forEach(el => {
        if (el.hero_type === id) {
          this.tankelists.push(el)
        }
      })
    },
    async getMoreHeroLists () {
      const { data, status } = await this.$axios('/getherolists')
      if (status !== 200) alert('数据请求不到')
      // console.log(data)
      this.MoreHeroLists = data
    },
    async getsummoners (id) {
      const { data, status } = await this.$axios('/WHgetsummoners')
      if (status !== 200) alert('数据请求不到')
      // console.log(data)
      this.summoners = data
    },
    async getsummoners2 (id) {
      const { data, status } = await this.$axios('/WHgetsummoners')
      if (status !== 200) alert('数据请求不到')
      data.forEach(el => {
        if (el.summoner_id === id) {
          this.jineng_name = el.summoner_name + '  ' + el.summoner_rank
          this.jineng_description = el.summoner_description
          this.summoner_id = el.summoner_id
        }
      })
    },
    async getdaojulists () {
      const { data, status } = await this.$axios('/WHgetdaojulists')
      if (status !== 200) alert('数据请求不到')
      // console.log(data)s
      this.daojulists = data
    },
    async getdaojuxxx (id) {
      const { data, status } = await this.$axios('/WHgetdaojulists')
      if (status !== 200) alert('数据请求不到')
      data.forEach(el => {
        if (el.item_id === id) {
          // console.log(el)
          this.daoju_title = el.item_name
          this.daoju_sj = el.price
          this.daoju_zj = el.total_price
          this.daoju_xq = el.des1
          this.daoju_img = el.img
        }
      })
    },
    changeid (id) {
      this.isname = id
      this.getheroxq(id)
    },
    changeJingpin (id) {
      this.isjingpin = id
      this.getjingpinxq(id)
    },
    changeLogo (id) {
      this.isflag = id
    },
    showMoreHero () {
      this.isShow = true
    },
    showMoreHeros () {
      this.isShow = false
    },
    changeMoreId (id) {
      this.num = id
      this.getMoreHeroList(id)
    },
    changeJiNengID (id) {
      this.isJinengCt = id
    },
    changejinengID (id) {
      this.getsummoners2(id)
    },
    changeStp (id) {
      this.isstp = id
      this.isfff = true
      this.getdaojuxxx(id)
    },
    changeaaa () {
      this.isfff = false
    },
    showSAN (id) {
      this.isSanjiao = id
      // console.log(id)
    },
    lastShow () {
      this.isSanjiao = false
    }
  },
  components: {
    LunboBottom,
    Footer
  }
}
</script>
<style lang="less" scoped>
.main{
  width: 1200px;
  margin: auto;
  p{
    margin: 0;
    padding: 0;
  }
  .fl{
    float: left;
  }
  .fr{
    float: right;
  }
  ul{
    margin: 0;
    padding: 0;
    li{
      margin: 0;
      padding: 0;
      list-style: none;
    }
  }
  .mainbg{
    height:619px;
    min-width: 1200px;
    width: 200%;
    margin-left: -356px;
    background-image: url(https://ossweb-img%2Eqq%2Ecom/upload/webplat/info/yxzj/20191217/86553549787627%2Ejpg);
  }
  .hear-logo{
    position: relative;
    margin: 0 auto 0;
    margin-top: -100px;
    width: 1200px;
    height: 100px;
    background: url(//game.gtimg.cn/images/yxzj/web201605/top_banner/bg_header.png) no-repeat;
    padding: 5px 12px;
    box-sizing: border-box;
    p{
      font-size: 13px;
      line-height: 10px;
      color: #6f7075;
      margin-bottom: 8px;
    }
    .logo-list{
      li{
        width: 69px;
        height: 69px;
        float: left;
        margin-right: 10px;
        position: relative;
        transition: all 0.4s ease-in-out;
        img{
          position: absolute;
          border-radius: 5px;
        }
        .img1{
          opacity: 0;
          transition: all 0.3s ease-in-out;
        }
        .img2{
          width: 69px;
          opacity: 1;
          transition: all 0.8s ease-in-out;
        }
      }
      li.content{
        width: 224px;
        transition: all 0.4s ease-in-out;
        .img1{
          opacity: 1;
          transition: all .4s ease-in-out;
        }
        .img2{
          opacity: 0;
          transition: all .8s ease-in-out;
        }
      }
    }
  }
  .toindex{
    padding: 20px 0;
  }
  .main-show{
    color: #ddd;
    height: 362px;
    background-color: #fff;
    margin-bottom: 20px;
    .left{
      width: 716px;
    }
    .right{
      width: 484px;
      height: 371px;
      box-sizing: border-box;
      padding: 10px;
      .search-button{
        height: 56px;
        .search{
          padding: 7px;
          width: 370px;
          background-color: #4e4e53;
          .search-icon{
            font-size: 20px;
            margin-right: 10px;
          }
        }
        .search-btn{
          width: 72px;
          height: 36px;
          margin-left: 8px;
          background-color: #4e4e53;
          border: 1px solid #333;
          border-radius: 4px;
          color: #ddd;
          font-size: 16px;
        }
        .input{
          background-color: #4e4e53;
          border: none;
          width: 70%;
          font-size: 16px;
        }
      }
      .search-txt{
        margin: 0;
        padding: 0;
        font-size: 14px;
        li{
          list-style: none;
          overflow: hidden;
          color: #6f7075;
          height: 28px;
          margin-bottom: 4px;
          padding: 0 74px 0 30px;
          position: relative;
          .s{
            color: #f3c258;
            border-color: #f3c258;
            position: absolute;
            left: 0;
            top: 6px;
            text-align: center;
            font-size: 11px;
            line-height: 14px;
            width: 14px;
            height: 14px;
            border: 1px solid #6f7075;
            border-radius: 2px;
          }
          cite{
            position: absolute;
            right: 18px;
            top: 6px;
            font-size: 11px;
            line-height: 14px;
            font-style: normal;
          }
          .t{
            line-height: 28px;
            text-decoration: none;
            color: #b8b9c5;
          }
        }
      }
    }
  }
  .hero-raiders{
    height: 535px;
    font: 14px/1.5 "Microsoft YaHei",Tahoma,"simsun",sans-serif;
    color: #323235;
    position: relative;
    h2{
      line-height: 50px;
    }
    .hero-list{
      margin: 0;
      padding: 0;
      list-style: none;
      height: 75px;
      margin-bottom: 25px;
      li.cutent{
        background: url("https://game.gtimg.cn/images/yxzj/web201706/images/raiders/hero-subscript.png") no-repeat -9px -4px ;
      }
      .li2{
        position: relative;
        float: left;
        height: 64px;
        margin-right: 15px;
        position: relative;
        padding: 3px;
        .hero-txts{
          width: 500px;
          position: absolute;
          top: 73px;
          left: 0;
          li{
            box-sizing: border-box;
            float: left;
            font-size: 14px;
            height: 20px;
            padding: 0 3px;
            margin: 0 3px;
          }
          li:nth-child(2){
            border-left: 1px solid #000;
            border-right: 1px solid #000;
          }
        }
        img{
          width: 51px;
          height: 51px;
        }
        div{
          position: absolute;
          left: 37px;
          top: -9px;
          width: 20px;
          height: 46px;
          background:url("https://game.gtimg.cn/images/yxzj/web201706/images/raiders/hero-subscript.png") no-repeat -98px 9px;
        }
        .hothero{
          position: absolute;
          left: 37px;
          top: -1px;
          width: 20px;
          height: 35px;
          background:url("https://game.gtimg.cn/images/yxzj/web201706/images/raiders/hero-subscript.png") no-repeat -76px -35px;
        }
      }
    }
    .moreheroBtn{
      width: 120px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: rgba(0, 0, 0, 0.5)
    }
    .hero-left{
      width: 622px;
      height: 380px;
      .shipin{
        li{
          float: left;
          margin-right: 14px;
          position: relative;
          img{
            width: 190px;
            height: 113px;
          }
          p{
            width: 190px;
          }
          .sanjiao{
            position: absolute;
            left: 0;
            top: 0;
            width: 190px;
            height: 113px;
            background-color: rgba(0, 0, 0 , 0.7);
            // opacity: 0.7;
            display: flex;
            justify-content: center;
            align-items: center;
            .logo{
              width: 50px;
              height: 50px;
              border-radius: 50%;
              background: url('https://game.gtimg.cn/images/yxzj/web201706/images/comm/index.png') no-repeat -187px -64px ;
            }
          }
        }
        li:nth-child(n+4){
          margin-top: 30px;
        }
        li:hover{
          .sanjiao{
            // opacity: 1;
            transition:all .4s ease;
          }
        }
      }
    }
    .hero-right{
      box-sizing: border-box;
      width: 570px;
      height: 380px;
      padding-top: 6px;
      li{
        display: flex;
        justify-content: space-between;
        line-height: 30px;
        padding: 8px;
        .span-left{
          flex: 1;
          width: 62px;
          height: 24px;
          background-color: #f5f5f5;
          color: #999;
          text-align: center;
          margin-right: 18px;
        }
        .span-right{
          flex: 4
        }
      }
    }
    // 弹出层
    .hero-raider{
      position: absolute;
      width: 802px;
      height: 300px;
      top: 150px;
      right: 0px;
      background-color: #fff;
      z-index: 50000;
      .hero-more{
        width: 680px;
        height: 100%;
        border: 1px solid #ccc;
        ul{
          padding: 16px;
          .more-li{
            float: left;
            width: 72px;
            height: 96px;
            text-align: center;
            img{
              width: 60px;
              height: 60px;
            }
          }
        }
      }
      .hero-type{
        width: 118px;
        height: 100%;
        border: 1px solid #ccc;
        ul{
          li{
            text-align: center;
            line-height: 50px;
          }
          li.cutent{
            background: #f3c258;
            color: #fff;
          }
        }
      }
    }
  }
  .jingpin{
    height: 460px;
    margin-top: 10px;
    .jingpin-left{
      border: 1px solid #ccc;
      padding-bottom: 30px;
      li{
        width: 188px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
      li.cutent{
        background-color: #f3c258;
        color: #fff;
      }
    }
    .jingpin-right{
      width: 1010px;
      height: 366px;
      li{
        float: left;
        width: 190px;
        font-size: 14px;
        margin-left: 4px;
        img{
          width: 190px;
          height: 113px;
        }
      }
    }
    .more-btn{
      margin-left: 1%;
      margin-top: 20px;
      width: 98%;
      height: 40px;
      background-color: #f5f5f5;
    }
  }
  .jineng{
    margin-top: 50px;
    height: 635px;
    .tab-jineng{
      width: 580px;
      .left{
        height: 42px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 3px solid #f3c258;
        background-color: #ccc;

      }
      .jineng-img1{
        display: block;
        margin-top: 5px;
        margin-left: 5px;
      }
      .jinenglists{
        height: 82px;
        margin-top: 10px;
        margin-bottom: 80px;
        li{
          float: left;
          text-align: center;
          margin-left: 2px;
          img{
            width: 56px;
            height: 56px;
            border-radius: 50%;
            border: 4px solid #fff;
            box-sizing: border-box;
          }
        }
        li.cutent{
          color: #f3c258;
          img{
            border: 4px solid #f3c258;
          }
        }
        li:hover{
          img{
            transform: scale(1.1);
            transition: all .8s ease;
          }
        }
      }
    }
    .tab-right{
      width: 620px;
      .left{
        border-left: 1px solid #000;
        height: 42px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 3px solid #f3c258;
        background-color: #ccc;
      }
      .daoju-list{
        padding: 8px 34px;
        li{
          text-align: center;
          float: left;
          padding: 13px;
          position: relative;
          img{
            width: 66px;
            height: 66px;
            border-radius: 5px;
          }
          div{
            font-size: 14px;
          }
          .tanchuDiv{
            position: absolute;
            left: 98px;
            top: 13px;
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0,0.8);
            z-index: 10000;
            padding: 10px;
            box-sizing: border-box;
            .top{
              height: 66px;
              img{
                margin-right: 20px;
              }
              .first{
                text-align: left;
                font-size: 18px;
                color: green;
              }
              .right{
                color: #f3c258;
              }
            }
            .down{
              margin-top: 20px;
              text-align: left;
              color: #55a6f6;
            }
          }
        }
      }
    }
  }
}
</style>
